<template>
  <div class="">
    <CommonTitle titleName="项目实施任务节点规划"></CommonTitle>
    <div class="titleCol d-flex">
      <div class="">
        所属项目：<span>{{ state.projectName }}</span>
      </div>
      <div class="m-l20">
        所属实施阶段：<span>{{ state.projectStageName }}</span>
      </div>
      <div class="m-l20">
        所属任务：<span>{{ state.taskName }}</span>
      </div>
      <div class="m-l20">
        任务类型：<span>{{ state.taskType == 1 ? '部门专属' : '公共' }}</span>
      </div>

      <el-button
	  	v-if="isShow()"
        @click="
          () => {
            title = '新增'
            visible = true
          }
        "
        class=""
        style="margin-left: auto"
        >新增任务实施节点</el-button
      >
    </div>

    <tableIndex
      ref="tableRef"
      :tableData="tableData"
      :tableHead="tableHead"
      :isIndex="true"
      :isSelection="true"
      :notSearch="true"
      :isPaging="false"
      :isRadio="false"
      :height="500"
      :page="page"
      @page-change="pageChange"
    >
      <template #operate>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
            <el-button
              size="small"
              class="button_edit"
              type="primary"
              @click="editHandler(row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </template>
    </tableIndex>
  </div>


  <public-dialog
    :title="title + '实施任务节点(工作明细)'"
    :width="'40%'"
    :confirmButtonTitle="'确认'"
    v-model:visible="visible"
    @onConfirm="onConfirm"
  >
    <el-form
      :model="modeForm"
      :rules="rules"
      ref="modeFormRef"
      label-width="160px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属任务名称">
            <el-input disabled v-model="modeForm.projectName" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="任务节点名称" prop="itemName">
            <el-input
              v-model="modeForm.itemName"
              placeholder="请输入任务节点名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="责任部门" prop="responsibleDepartmentId">
            <el-select
              v-model="modeForm.responsibleDepartmentId"
              clearable
              placeholder="请选择责任部门"
              @change="departmentIdChange(modeForm.responsibleDepartmentId)"
            >
              <el-option
                v-for="item in state.allDepartmentList"
                :key="item.departmentId"
                :label="item.departmentName"
                :value="item.departmentId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="责任人" prop="responsibleUserId">
            <el-select
              v-model="modeForm.responsibleUserId"
              clearable
              placeholder="请选择项目负责人"
            >
              <el-option
                v-for="item in state.departmentPersonList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="节点对应实施行为" prop="actionId">
            <el-select v-model="modeForm.actionId">
              <el-option
                v-for="item in state.allActionList"
                :key="item.actionId"
                :label="item.actionName"
                :value="item.actionId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="节点实施期限" prop="time">
            <el-date-picker
              v-model="modeForm.time"
              @change="handelChangeTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="YYYY-MM-DD hh:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </public-dialog>
</template>

<script setup>
import { ref, reactive,computed, onMounted, watch } from 'vue'
import { ElForm, ElRow, ElCol, ElSelect, ElInput } from 'element-plus'
import CommonTitle from '@/components/CommonTitle.vue'
import TableIndex from '@/components/table/index.vue'
import PublicDialog from '@/components/PublicDialog.vue'
import { projectConfigApi, department } from '@/api/project.js'
import { useRouter, useRoute } from 'vue-router'
import { getURLhandler } from '@/views/constructionProjectManage/static/utools.js'

let router = useRouter()
let route = useRoute()

const projectTaskId = getURLhandler(route.path).projectTaskId

const rules = {
  itemName: [
    {
      required: true,
      message: '请输入任务节点名称',
      trigger: 'blur'
    }
  ],
  responsibleDepartmentId: [
    {
      required: true,
      message: '请选择责任部门',
      trigger: 'blur'
    }
  ],
  responsibleUserId: [
    {
      required: true,
      message: '请选择责任人',
      trigger: 'blur'
    }
  ],
  actionId: [
    {
      required: true,
      message: '请选择节点对应实施行为',
      trigger: 'blur'
    }
  ],
  time: [
    {
      required: true,
      message: '请选择节点实施期限',
      trigger: 'blur'
    }
  ]
}
const page = reactive({
  page: 1,
  pageSize: 50,
  total: 0
})
const modeForm = ref({})
const tableData = ref([])
const tableHead = ref([
  {
    prop: 'itemName',
    label: '工作细项'
  },
  {
    prop: 'actionName',
    label: '实施行为类型'
  },
  {
    prop: 'responsibleDepartmentName',
    label: '责任部门'
  },
  {
    prop: 'responsibleUserName',
    label: '责任人'
  },
  {
    prop: 'planStartTime',
    label: '节点计划开始时间'
  },
  {
    prop: 'planEndTime',
    label: '节点计划结束时间'
  },
  {
    prop: 'planDays',
    label: '工期'
  }
])
let departmentId = JSON.parse(window.localStorage.getItem('SST-DepartmentId'))
const state = reactive({
  allDepartmentList: [],
  departmentPersonList: [],
  allActionList: []
})
//分页
const pageChange = (e) => {
  page.page = e.page
  page.pageSize = e.limit

  getPage()
}

const visible = ref(false)
const title = ref('')
const editHandler = (row) => {
  title.value = '编辑'
  visible.value = true
  modeForm.value = {
    ...row,
    projectTaskId: projectTaskId,
    projectName: state.projectName
  }
  modeForm.value.time = [row.planStartTime, row.planEndTime]
}
const modeFormRef = ref(null)

const onConfirm = () => {
  modeFormRef.value.validate((valid) => {
    if (valid) {
      if (title.value == '新增') {
        createNode()
      } else {
        updateNode()
      }
    }
  })
}
watch(
  () => visible.value,
  (value) => {
    if (!value) {
      modeForm.value = {}
      modeFormRef.value.resetFields()
    } else {
      if (title.value == '新增') {
        modeForm.value = {
          projectTaskId: projectTaskId,
          projectName: state.projectName
        }
      }
    }
  }
)
const isShow = computed(() => () => {
    let falg = true;
    if(getURLhandler(route.path).isGovernment && getURLhandler(route.path).isGovernment==='1'){
        return  falg = false;
    }
		switch (departmentId) {
			case '-3273533166343271534':
			falg=false
				break;
			case '2960838433294208616':
			falg=false
				break;
			case '-5515261004502579607':
			falg=false
				break;
			default:
				break;
			}
			return falg;
});

const getPage = () => {
  projectConfigApi.getItemList(projectTaskId).then((res) => {
    tableData.value = res.data
  })
}
const createNode = () => {
  projectConfigApi.taskItemCreate(modeForm.value).then((res) => {
    if (res.code == 200) {
      getPage()
      visible.value = false
    }
  })
}
const updateNode = () => {
  projectConfigApi.taskItemUpdate(modeForm.value).then((res) => {
    if (res.code == 200) {
      getPage()
      visible.value = false
    }
  })
}
// 行为
const getActionList = () => {
  projectConfigApi.getActionList().then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      state.allActionList = data
    }
  })
}
// 获取所有部门
const getAllDepartments = () => {
  department.getAllDepartments().then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      state.allDepartmentList = data
    }
  })
}
// 获取项目 负责人
const getLeaderByDepartmentId = (responsibleDepartmentId) => {
  department.getUserByDepartmentId(responsibleDepartmentId).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      state.departmentPersonList = data
    }
  })
}
// 获取任务详情
const getTaskInfo = () => {
  projectConfigApi.getTaskInfo(projectTaskId).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      for (let key in data) {
        if (data[key]) {
          state[key] = data[key]
        }
      }
    }
  })
}
const handelChangeTime = (e) => {
  if (e && e.length > 0) {
    modeForm.value.planStartTime = e[0]
    modeForm.value.planEndTime = e[1]
  }
}
const departmentIdChange = (id) => {
  modeForm.value.responsibleUserId = ''
}
// 监听 项目负责部门 调用 项目负责人
watch(
  () => modeForm.value.responsibleDepartmentId,
  (value) => {
    if (value) {
      getLeaderByDepartmentId(value)
    }
  }
)

onMounted(() => {
  getPage()
  getActionList()
  getAllDepartments()
  getTaskInfo()
})
</script>

<style lang="scss" scoped>
.el-select,
.el-row,
.el-form-item {
  width: 100% !important;
}

.titleCol {
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 700;
  color: #1a1a1a;
}
</style>
